<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>支付宝支付演示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"/>
</head>

<div class="layuimini-main">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li>支付配置</li>
            <li class="layui-this">扫码支付演示</li>
            <li>电脑网站支付演示</li>
            <li>交易查询</li>
            <li>退款演示</li>
        </ul>
        <div class="layui-tab-content">
            <!-- 支付配置 -->
            <div class="layui-tab-item">
                <div class="layui-main">
                    <!-- 表单 -->
                    <form class="layui-form" action="">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>基本信息配置（必填）</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">APPID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="appId" value="20210058" autocomplete="off" required class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">设置支付宝应用的appid</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">APPID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="appName" value="沙箱测试应用" autocomplete="off" required class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">设置支付宝应用的名称</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">应用私钥</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mchId" value="MIIEvAUpFY8wf6zJVf22u2kNomfr6*****" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付宝应用私钥（Java语言）</div>
                        </div>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>公钥模式（与证书模式二选一）</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付宝公钥</label>
                            <div class="layui-input-inline">
                                <input type="text" name="dssd" value="MIIEvAUpFY8wf6zJVf22u2kNomfr6*****" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付宝公钥</div>
                        </div>

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>证书模式（与公钥模式二选一）</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">应用公钥证书</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mchKey" value="E:\支付宝支付\appCertPublicKey_20210*****8.crt" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付宝的应用公钥证书文件路径</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付宝公钥证书</label>
                            <div class="layui-input-inline">
                                <input type="text" name="apiV3Key" value="E:\支付宝支付\alipayCertPublicKey_RSA2.crt" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付宝公钥证书文件路径</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付宝根证书</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cert2" value="E:\支付宝支付\alipayRootCert.crt" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付宝根证书文件路径</div>
                        </div>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>其他信息配置</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">AES密钥</label>
                            <div class="layui-input-inline">
                                <input type="text" name="key" value="cAikHtKWeT***vw==" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">AES密钥（接口内容加密方式）</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">通知地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="notifyUrl" value="https://dev.zxdmy.com/component/alipay/pay/notify" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">必须为外网可访问的url，不能携带参数。公网域名必须为https</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付宝网关域名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="notifyUrl" value="openapi.alipay.com" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">证书模式填写：openapi.alipay.com 沙箱环境填写：openapi.alipaydev.com</div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="#" lay-filter="form-alipay-save">立即保存</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 扫码支付演示 -->
            <div class="layui-tab-item layui-show">
                <div class="layui-main">
                    <!-- 表单 -->
                    <form class="layui-form" action="">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>支付宝手机扫码支付演示</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" required value="测试商品名称" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">输入商品名称</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品金额</label>
                            <div class="layui-input-inline">
                                <input type="number" name="price" autocomplete="off" required value="0.01" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付金额</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="#" lay-filter="form-alipay-pay">立即支付</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-main">
                    <div id="qrcode"></div>
                    <br>
                    <div id="outTradeNo" style="font-size: 16px"></div>
                </div>
            </div>
            <!-- 电脑网站支付演示 -->
            <div class="layui-tab-item">
                <div class="layui-main">
                    <!-- 表单 -->
                    <form class="layui-form" action="">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>电脑网站支付演示</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" required value="测试商品名称" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">输入商品名称</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品金额</label>
                            <div class="layui-input-inline">
                                <input type="number" name="price" autocomplete="off" required value="0.01" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写支付金额</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="#" lay-filter="form-alipay-pay-web">立即支付（跳转新页面支付）</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 交易查询 -->
            <div class="layui-tab-item">
                <div class="layui-main">
                    <!-- 表单 -->
                    <form class="layui-form" action="">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>交易结果查询</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商户单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="outTradeNo" autocomplete="off" required class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">输入商户单号</div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="#" lay-filter="form-alipay-query">立即查询</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-main">
                    <div>商户单号在哪里？① 【扫码支付演示】页面有显示 ② 支付宝订单页面有显示。</div>
                </div>
            </div>
            <!-- 退款演示 -->
            <div class="layui-tab-item">
                <div class="layui-main">
                    <!-- 表单 -->
                    <form class="layui-form" action="">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>退款操作</legend>
                        </fieldset>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商户单号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="outTradeNo" autocomplete="off" required class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">输入商户单号</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">退款金额</label>
                            <div class="layui-input-inline">
                                <input type="number" name="amount" autocomplete="off" required value="0.01" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">填写退款金额，不能大于实际支付金额</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="#" lay-filter="form-alipay-refund">立即退款</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-main">
                    <div>商户单号在哪里？① 【扫码支付演示】页面有显示 ② 支付宝订单页面有显示。</div>
                </div>
            </div>
        </div>
    </div>
</div>

<body>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            form = layui.form; //弹层;

        let qrcode = new QRCode("qrcode");

        // 扫码支付
        form.on('submit(form-alipay-pay)', function (data) {
            console.log(JSON.stringify(data.field))
            layer.load();
            $.post("/pay", data.field, function (data) {
                // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                if (data.code === 200) {
                    qrcode.clear()
                    qrcode.makeCode(data.qrcode)
                    $("#outTradeNo").html(
                        "支付宝扫码体验支付 <br><br> 商户单号：<b style='color: red'>" + data.outTradeNo +
                        "</b><br><br>注意：支付成功后，不会有任何提示，请通过商户单号，使用【交易查询】功能查询支付结果！（主要是懒得写轮询了.....）")
                } else {
                    layer.alert(data.msg, {offset: 't', icon: 2});
                }
                layer.closeAll('loading');
            });
            return false;
        });
        // 电脑网站支付
        form.on('submit(form-alipay-pay-web)', function (data) {
            console.log(JSON.stringify(data.field))
            window.open("/pay/page?title=" + data.field.title + "&price=" + data.field.price);
            // window.location.href = "/pay/web?title=" + data.field.title + "&price=" + data.field.price
            return false;
        });
        // 查询
        form.on('submit(form-alipay-query)', function (data) {
            console.log(JSON.stringify(data.field))
            layer.load();
            $.post("/query", data.field, function (data) {
                layer.closeAll('loading');
                // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                if (data.code === 200) {
                    layer.alert(data.msg, {offset: 't', icon: 1});
                } else {
                    layer.alert(data.msg, {offset: 't', icon: 2});
                }

            });
            return false;
        });
        // 退款
        form.on('submit(form-alipay-refund)', function (data) {
            console.log(JSON.stringify(data.field))
            layer.load();
            $.post("/refund", data.field, function (data) {
                layer.closeAll('loading');
                // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                if (data.code === 200) {
                    layer.alert(data.msg, {offset: 't', icon: 1});
                } else {
                    layer.alert(data.msg, {offset: 't', icon: 2});
                }

            });
            return false;
        });
        // 保存
        form.on('submit(form-alipay-save)', function (data) {
            console.log(JSON.stringify(data.field))
            layer.msg("没写...")
            return false;
        });

    });
</script>
</body>

</html>
